<template>
  <div>
    <el-dialog title="双击选择商户" :visible.sync="mchTableVisible" width="650px" v-el-drag-dialog append-to-body
      :before-close="mchTableClose">
      <div style="position: relative;">
        <sysMch @mchDouble="mchDouble"></sysMch>
      </div>
    </el-dialog>
    <!-- <el-breadcrumb class="app-breadcrumb" separator="/">
      <transition-group name="breadcrumb"> -->
    <!-- <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
          <el-select v-if="index == 0" v-model="sysMchName" placeholder="请选择商户" filterable
                     value-key="id" :filter-method="querySysmch" @change="changeSysMch">
            <el-option style="width:300px" v-for="item in mchIdOptions" :key="item.id" :label="item.name" :value="item">
            </el-option>
            <div style="display: flex;width: 100%;position: absolute;bottom: 0">
              <div style="width: 50%;background-color: rgb(248,248,248);"></div>
              <div class="elOption" @click="sysClick">搜索商户</div>
            </div>
            <div style="height: 40px"></div>
          </el-select>
          <span v-if="index != 0 && index!=levelList.length-1" style="margin-left: 10px;margin-right: 10px"> {{ generateTitle(item.meta.title) }}</span>
          <span v-if="index != 0 && index==levelList.length-1"  style="margin-left: 10px;margin-right: 10px" class="no-redirect"> {{ generateTitle(item.meta.title) }}</span> -->
    <!--        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">-->
    <!--          {{ generateTitle(item.meta.title) }}-->
    <!--        </span>-->
    <!--        <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>-->
    <!-- </el-breadcrumb-item> -->
    <!-- <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">活动列表</el-breadcrumb-item> -->
    <!-- <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
    <!-- </transition-group>
    </el-breadcrumb> -->
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <el-breadcrumb-item>
        <el-select v-model="sysMchName" placeholder="请选择商户" filterable value-key="id" :filter-method="querySysmch"
          @change="changeSysMch">
          <el-option style="width:300px" v-for="item in mchIdOptions" :key="item.id" :label="item.name" :value="item">
          </el-option>
          <div style="display: flex;width: 100%;position: absolute;bottom: 0">
            <div style="width: 50%;background-color: rgb(248,248,248);"></div>
            <div class="elOption" @click="sysClick">搜索商户</div>
          </div>
          <div style="height: 40px"></div>
        </el-select>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
  import {
    generateTitle
  } from '@/utils/i18n'
  import pathToRegexp from 'path-to-regexp'
  import {
    list as sysMchList
  } from '@/api/sysMch'
  import {
    mapGetters
  } from 'vuex'
  import elDragDialog from '@/directive/el-drag-dialog'
  import sysMch from '@/components/SysMch/index'
  import permission from '@/directive/permission' // base on element-ui
  export default {
    data() {
      return {
        levelList: null,
        mchIdOptions: [],
        sysMchId: '',
        sysMchName: '',
        mchTableVisible: false,
        textNumber: null
      }
    },
    directives: {
      elDragDialog
    },
    watch: {
      $route(route) {
        // if you go to the redirect page, do not update the breadcrumbs
        if (route.path.startsWith('/redirect/')) {
          return
        }
        this.getBreadcrumb()
      }
    },
    created() {
      this.getBreadcrumb()
      this.loadSysmch()
      this.sysMchId = this.mchId
      this.sysMchName = this.mchName
      // this.textTitle(this.sysMchName)
    },
    computed: {
      // text () {
      //   return function (value) {
      //     if (value == '' || value == 0) {
      //       return '100%'
      //     } else {
      //       return String(value).length * 20 + 'px'
      //     }
      //   }
      // },
      ...mapGetters([
        'mchId', 'mchName'
      ])
    },
    components: {
      sysMch
    },
    methods: {
      generateTitle,
      getBreadcrumb() {
        // only show routes with meta.title
        let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
        const first = matched[0]
        if (!this.isDashboard(first)) {
          matched = [{
            path: '/dashboard',
            meta: {
              title: 'dashboard'
            }
          }].concat(matched)
        }
        this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
      },
      isDashboard(route) {
        const name = route && route.name
        if (!name) {
          return false
        }
        return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
      },
      pathCompile(path) {
        // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
        const {
          params
        } = this.$route
        var toPath = pathToRegexp.compile(path)
        return toPath(params)
      },
      handleLink(item) {
        const {
          redirect,
          path
        } = item
        if (redirect) {
          this.$router.push(redirect)
          return
        }
        this.$router.push(this.pathCompile(path))
      },
      loadSysmch(query) {
        sysMchList({
          name: query
        }).then(res => {
          this.mchIdOptions = res.data.data
        }).catch(err => {
          console.log(err)
        })
      },
      querySysmch(query) {
        this.loadSysmch(query)
      },
      mchDouble(data) {
        console.log(data)
        this.$store.dispatch('user/sysMch', data.id).then(() => {
          this.mchTableVisible = false
          this.sysMchId = data.id
          this.$message('切换成功')
          this.closeAllTags()
        }).catch(() => {})
      },
      changeSysMch(data) {
        console.log(data)
        this.$store.dispatch('user/sysMch', data.id).then(() => {
          this.$message('切换成功')
          // this.textTitle(data.name)
          this.closeAllTags()
        }).catch(() => {})
      },
      // textTitle (value) {
      //     if (value == '' || value == 0) {
      //       this.textNumber = '100%'
      //     } else {
      //       this.textNumber =  String(value).length * 20 + 'px'
      //       console.log(this.textNumber)
      //     }
      // },
      closeAllTags(view) {
        console.log()
        this.$store.dispatch('tagsView/delAllViews').then(({
          visitedViews
        }) => {
          console.log(visitedViews)
          this.$router.push('/')
        })
      },
      sysClick() {
        this.mchTableVisible = true
      },
      mchTableClose() {
        this.mchTableVisible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 8px;

    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }

  /deep/.el-input__inner {
    border: none;
    padding-left: 0;
  }

  /deep/.el-breadcrumb__separator {
    margin: 0;
  }

  .elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }

  /deep/.el-dialog__body {
    padding-top: 0 !important;
    padding-bottom: 20px;
  }
</style>
